<template>
	<div class="subTabbar">
		<div class="container">
			<div class="icon-item" v-for="item in subMenu" :key="item.id" @click="handleJumpPage(item)">
				<div class="image">
					<image class="iconSize" :src="item.id != activeIndex?item.imageUrl:item.selectImageUrl" alt="" />
				</div>
				<div class="title" :class="{'active':item.id == activeIndex}">
					{{item.text}}
				</div>
			</div>
			<div class="close" @click="goPersonPage">
				<image class="iconSize" src="../../static/market/close.png" alt="" />
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'subTabbar',
		data() {
			return {
				activeIndex: '',
				currentRoute: '',
				subMenu: [
					// {
					// 	id: '1',
					// 	path: '/pages/cat/cat',
					// 	imageUrl: require('../../static/market/gwc.png'),
					// 	selectImageUrl: require('../../static/market/select-gwc.png'),
					// 	text: '购物车',
					// },
					{
						id: '2',
						path: '/pages/market/index',
						imageUrl: require('../../static/market/jysc.png'),
						selectImageUrl: require('../../static/market/selected-jysc.png'),
						text: '易货市场',
					},
					{
						id: '3',
						path: '/pages/cloudStore/index',
						imageUrl: require('../../static/market/wdyd.png'),
						selectImageUrl: require('../../static/market/selected-wdyd.png'),
						text: '我的云店',
					},
					{
						id: '4',
						path: '/pages/purchaseGoods/index',
						imageUrl: require('../../static/market/jh.png'),
						selectImageUrl: require('../../static/market/selected-jh.png'),
						text: 'AI易货',
					}
				]
			}
		},
		watch: {
			currentRoute(newData, oldValue) {
				let index = ''
				if (newData) {
					switch (newData) {
						case '/pages/cat/cat':
							index = 1
							break;
						case '/pages/market/index':
							index = 2
							break;
						case '/pages/cloudStore/index':
							index = 3
							break;
						case '/pages/purchaseGoods/index':
							index = 4
							break;
						default:
							break;
					}
					this.activeIndex = index
				}
			}
		},
		mounted() {
			var pages = getCurrentPages()
			this.currentRoute = pages[pages.length - 1]['$page']['fullPath']
		},
		methods: {
			goPersonPage() {
				uni.switchTab({
				  url: '/pages/mine/index',
				  success() {
				    uni.showTabBar()
				  }
				})
			},
			handleJumpPage(item) {
				if (item.id == 4) {
					this.$emit('options')
					uni.switchTab({
						url: item.path
					})
					return
				}
				if (item.id == this.activeIndex) return
				// if (item.id == 2) {
				// 	uni.switchTab({
				// 		url: item.path
				// 	})
				// 	return
				// }
				uni.navigateTo({
					url: item.path
				})
			}
		}

	}
</script>

<style scoped lang="less">
	.subTabbar {
		width: 100%;
		height: 150rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 26%, #FFFFFF 100%);

		.container {
			width: 484rpx;
			height: 100rpx;
			background: rgba(0, 0, 0, 0.8);
			border-radius: 32rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			display: flex;
			padding: 0 20rpx;
			box-sizing: border-box;
			position: relative;

			.icon-item {
				margin-right: 48rpx;
				// width: 88rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
			}

			.iconSize {
				width: 40rpx;
				height: 40rpx;
			}

			.title {
				font-weight: 400;
				font-size: 22rpx;
				color: #FFFFFF;
			}

			.active {
				color: var(--tm-themeColor-level1);
			}

			.close {
				position: absolute;
				top: 0;
				bottom: 0;
				display: flex;
				right: 30rpx;
				align-items: center;

			}
		}
	}
</style>